<template>
  <div class="content">
    <!--照片-->
    <div class="big-logo">
      <img src="../assets/bg_image.png">
      <div class="text-img">
        <p class="text-title">
          <span>| 一支穿云箭,</span>
          <span>千军万马来相见</span>
        </p>
        <p class="text-small">
          <span>云游世界，尽享网络自由</span>
        </p>
      </div>
    </div>
    <!--优势-->
    <div class="advantage">
      <div class="advantage-content">
        <section v-for="item in items">
          <div class="describeImg">
            <p><img :src="item.imgSrc"></p>
            <p>{{item.text}}</p>
          </div>
          <div class="describeText" v-html="item.HtmlText"></div>
        </section>
      </div>
    </div>
    <!--平台-->
    <div class="SupportEquipment">
      <div class="three">
        <h2>全平台支持</h2>
        <div class="support-list">
          <ul>
            <li v-for="list in supportImg">
              <img :src="list.imgSRC">
              <P>{{list.textName}}</P>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import img1 from '../assets/icon_easy.png'
  import img2 from '../assets/icon_fast.png'
  import img3 from '../assets/icon_safe.png'
  import img4 from '../assets/icon_android.png'
  import img5 from '../assets/icon_ios.png'
  import img6 from '../assets/icon_linux.png'
  import img7 from '../assets/icon_windows.png'
  import img8 from '../assets/icon_mac.png'
  export default {
    name: 'header',
    data (){
        return{
            items:[
              {
                  imgSrc:img1,
                  text:'简单方便',
                  HtmlText:'<P>使用穿云令，无需手动配置，一键安装，<br>一键链接</P>' +
                  '<p>支持多客户端，手动，自动，全局，三种<br>模式可任意切换,根据个人需求调节网速快' +
                  '慢</p>'

              },
              {
                imgSrc:img2,
                text:'高速稳定',
                HtmlText:'<P>使用穿云令，无需手动配置，一键安装，<br>一键链接</P>' +
                '<p>支持多客户端，手动，自动，全局，三种<br>模式可任意切换,根据个人需求调节网速快' +
                '慢</p>'

              },
              {
                imgSrc:img3,
                text:'安全可靠',
                HtmlText:'<P>使用穿云令，无需手动配置，一键安装，<br>一键链接</P>' +
                '<p>支持多客户端，手动，自动，全局，三种<br>模式可任意切换,根据个人需求调节网速快' +
                '慢</p>'

              }
            ],
          supportImg:[
            {
              imgSRC:img4,
              textName:'Android'
            },
            {
              imgSRC:img5,
              textName:'iOS'

            },
            {
              imgSRC:img6,
              textName:'Linux'

            },
            {
              imgSRC:img7,
              textName:'Windows'

            },
            {
              imgSRC:img8,
              textName:'Mac'

            }
          ]
        }
    }
  }
</script>

<style>
  .content{
    min-width: 960px;
  }
  .big-logo{
    height: auto;
  }
  .big-logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .big-logo div{
    height: 100px;
    width: 100%;
    position: absolute;
    top:140px;
  }
  .big-logo div p{
    width: 80%;
    margin: auto;
    text-align: left;
  }
  .big-logo div p span{
    text-align: left;
  }
  .text-title span{
    font-size: 2.5rem;
  }
  .text-title span:nth-child(1){
    color: #ffffff;
  }
  .text-title span:nth-child(2){
    color: #FF7A3F;
  }
  .text-small{
    text-align: left;
    padding: 25px 0 0 40px;
    color:  #FF7A3F;
    font-size: 2rem;
    font-weight: 100;
  }
  /*第二块样式*/
  .advantage{
    width: 100%;
    background-color: #F5F5F5;
    padding: 60px 0;
  }
  .advantage-content{
    min-width: 960px;
    max-width: 1440px;
    margin: auto;
  }
  .advantage section{
    display: inline-block;
    /*border: 1px solid #333333;*/
    width: 25%;
    margin: 0 50px;
    -webkit-box-shadow:0 0 5px rgba(224, 223, 223, .5);
    -moz-box-shadow:0 0 5px rgba(224, 223, 223, .5);
    box-shadow:0 0 5px rgba(224, 223, 223, .5);
  }
  .advantage section div{
    height: 50%;
  }
  .describeImg{
    padding: 40px 0;
  }
  .describeText{
    background-color: #FF7A3F;
    color: #ffffff;
    padding: 35px 15px;
  }
  .describeText p{
    text-indent: 2rem;
    text-align: left;

  }
  /*平台部分*/
  .SupportEquipment{
    min-width: 960px;
    width: 100%;
  }
  .three{
    margin: auto;
    padding: 100px 0;
    width: 80%;
  }
  .three h2{
    padding-bottom: 60px;

  }
  .three img{
    display: block;
  }
  .three p{
    color: #FF7A3F;
  }
  .support-list ul li{
    list-style: none;
    display: inline-block;
    padding: 0 4%;
  }

</style>
